<template>
    <div class="container">
        <el-page-header @back="goBack" content="加盟商列表"></el-page-header>
        <div class="e-m-t-45">
            <el-row class="e-m-b-15" type="flex" justify="space-between">
                <el-col :span="3">
                    <el-button type="primary" plain icon="el-icon-plus" @click="dialogVisible = true">新建加盟商</el-button>
                </el-col>
                <el-col class="text-right">
                    
                </el-col>
            </el-row>
            <el-table :data="tableData" style="width: 100%" stripe :border="true">
                <el-table-column fixed type="index" width="50">
                </el-table-column>
                <el-table-column prop="name" label="加盟商名称">
                </el-table-column>
                <el-table-column prop="paymode" label="结算模式">
                </el-table-column>
                <el-table-column prop="balance" label="账户余额（元）">
                    <template slot-scope="scope">
                        <span v-if="scope.row.paymode">{{scope.row.balance}}</span>
                        <span v-else>--</span>
                    </template>
                </el-table-column>
                <!-- <el-table-column prop="paymode" label="是否启用余额">
                    <template slot-scope="scope">
                        <el-switch v-model="scope.row.paymode" @change="switchState($event, scope.row)"></el-switch>
                    </template>
                </el-table-column> -->
                <el-table-column label="操作" fixed="right" width="300">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" @click="views(scope.row)">查看</el-button>
                        <el-button type="text" size="small" @click="stratEdit(scope.row)">设置</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- 新建加盟商 -->
        <el-dialog title="新建加盟商" :visible.sync="dialogVisible" width="500px">
            <el-form ref="addForm" :model="addForm" :rules="rules" label-width="140px">
                <el-form-item label="名称" prop="name">
                    <el-input v-model="addForm.name"></el-input>
                </el-form-item>
                <!-- <el-form-item label="负责人" prop="manager">
                    <userList v-model="addForm.manager"></userList>
                </el-form-item> -->
                <el-form-item label="手机号码" prop="mobile">
                    <autocompleteCustomer v-model="addForm.mobile" placeholder="请输入手机号码" @select="selectCustomer"
                        @change="(val) => { addForm.mobile = val; addForm.userId = 0;nameDisabled = false }"
                        @input="() => $refs.addForm.validateField('mobile')"
                        @blur="() => $refs.addForm.validateField('mobile')">
                    </autocompleteCustomer>
                </el-form-item>
                <el-form-item label="名称" prop="username">
                    <el-input v-model="addForm.username" placeholder="请输入名称" :disabled="nameDisabled"
                        @input="$refs.addForm.validateField('name')"
                        @blur="$refs.addForm.validateField('name')"></el-input>
                </el-form-item>
                <!-- <el-form-item label="启用余额" prop="paymode">
                    <el-switch v-model="addForm.paymode"></el-switch>
                </el-form-item> -->
                <el-form-item label="账户管理模式" prop="paymode">
                    <el-radio-group v-model="addForm.paymode" class="e-m-t-12">
                        <div class="e-p-b-15">
                            <el-radio label="预存模式">预存模式</el-radio>
                            <div class="tips e-font-14 e-p-l-24">加盟商需预存金额到运营商才能使用线上结算，余额不足时不能使用线上结算</div>
                        </div>
                        <div class="e-p-b-15">
                            <el-radio label="后付模式">后付模式</el-radio>
                            <div class="tips e-font-14 e-p-l-24">不需要预存金额也可以使用线上结算</div>
                        </div>
                        <div class="e-p-b-15">
                            <el-radio label="禁用">禁用线上结算</el-radio>
                            <div class="tips e-font-14 e-p-l-24">加盟商禁止使用线上支付，仅可使用线下结算</div>
                        </div>
                    </el-radio-group>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="createFranchise">确定</el-button>
            </span>
        </el-dialog>
        <!-- 修改 -->
        <el-dialog title="编辑" :visible.sync="editDialogVisible" width="500px" z-index="99">
            <el-form ref="form" label-width="auto">
                <el-form-item label="名称">
                    <el-input v-model="editForm.name" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="账户管理模式">
                    <el-radio-group v-model="editForm.paymode" class="e-m-t-12">
                        <div class="e-p-b-15">
                            <el-radio label="预存模式">预存模式</el-radio>
                            <div class="tips e-font-14 e-p-l-24">加盟商需预存金额到运营商才能使用线上结算，余额不足时不能使用线上结算</div>
                        </div>
                        <div class="e-p-b-15">
                            <el-radio label="后付模式">后付模式</el-radio>
                            <div class="tips e-font-14 e-p-l-24">不需要预存金额也可以使用线上结算</div>
                        </div>
                        <div class="e-p-b-15">
                            <el-radio label="禁用">禁用线上结算</el-radio>
                            <div class="tips e-font-14 e-p-l-24">加盟商禁止使用线上支付，仅可使用线下结算</div>
                        </div>
                    </el-radio-group>
                </el-form-item>
                <!-- <el-form-item label="是否启用余额">
                    <el-switch v-model="editForm.paymode"></el-switch>
                </el-form-item> -->
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="confirmEdit">确定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import autocompleteCustomer from "@/components/form-select-type/autocompleteCustomer.vue"
// import userList from '@/components/form-select-type/userList.vue'

export default {
    layout: 'admin',
    components: {
        // userList,
        autocompleteCustomer
    },
    data() {
        return {
            loading: true,
            key: '',
            pageIndex: 1,
            pageSize: 10,
            total: 0,
            tableData: [],
            tableColumns: [],
            tableActions: [
                {
                    name: 'view',
                    label: '查看',
                    // visible: row => row.status !== 'deleted'
                },
            ],
            franchiseId: null,
            staffId: null,
            // 新建加盟商
            dialogVisible: false,
            nameDisabled: false,
            addForm: {
                name: "",
                username: "",
                manager: null,
                paymode: 2
            },
            rules: {
                name: [
                    { required: true, message: '请填写名称', trigger: 'blur' },
                ],
                mobile: [
                    { required: true, message: '请填写手机号', trigger: 'blur' },
                ]
            },
            // 编辑
            editDialogVisible: false,
            editForm:{
                name: '',
                paymode: 2
            }
        }
    },
    watch: {
        dialogVisible(val) {
            if (!val) {
                this.addForm = { 
                    name: "",
                    manager: null,
                    paymode: 2
                }
            }
        }
    },
    mounted() {
        this.getList()
    },
    methods: {
        goBack() {
            this.$router.go(-1)
        },
        selectCustomer(obj) {
            console.log('selectCustomer', obj)
            this.nameDisabled = true
            this.addForm.username = obj.name
            this.addForm.userId = obj.id
        },
        // changeEditState(value){
        //     this.addForm.paymode = value
        //     console.log(this.addForm.paymode,value)
        // },
        //修改状态
        switchState(event, row) {
            this.$axios.post(`/Franchise/Edit`, {
                "id": row.id,
                "name": row.name,
                "paymode": event
            }).then((res) => {
                if (res.status == 0) {
                    this.$message.success(res.msg);
                } else {
                    this.$message.error(res.msg);
                }
            }).catch((err) => {
                this.getList()
            })
        },
        //新建加盟商
        createFranchise() {
            this.$refs.addForm.validate((valid) => {
                if (valid) {
                    let params = {
                        name: this.addForm.name,
                        mobile: this.addForm.mobile,
                        username: this.addForm.username,
                        userid: this.addForm.userId,
                        paymode: this.addForm.paymode,
                    }
                    this.$axios.post('/Franchise/Create', params).then((res) => {
                        this.$message.success("新建加盟商成功");
                        this.dialogVisible = false
                        this.getList()
                    })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        //修改加盟商
        stratEdit(row){
            this.editForm.id = row.id
            this.editForm.name = row.name
            this.editForm.paymode = row.paymode
            this.editDialogVisible = true
            this.$forceUpdate()
            console.log('修改加盟商:',this.editForm)
        },
        confirmEdit(){
            let params = {
                id: this.editForm.id,
                name: this.editForm.name,
                paymode: this.editForm.paymode
            }
            console.log(params)
            this.$axios.post('/Franchise/Edit', params).then((res)=>{
                this.$message.success('修改成功')
                this.getList()
                this.editDialogVisible = false
            })
        },
        // 查看加盟商详情
        views(row){
            console.log(row)
            this.$router.push({
                path: '/franchisee/details',
                query: {
                    id: row.id,
                    name: row.name,
                    balance: row.balance,
                    paymode: row.paymode
                }
            })
        },
        // changeUser(value){
        //     console.log(value)
        //     this.staffId = value
        // },
        // staffAdd(){
        //     this.$axios.get('/Franchise/Staff/Add',{
        //         params:{
        //             "franchiseId": this.franchiseId,
        //             "staffId": this.staffId
        //         }
        //     }).then((res) => {
        //         this.$message({
		// 			type: 'success',
		// 			message: '添加成功'
		// 		});
        //         this.dialogVisible = false
        //         this.getList()
        //     }).catch((err) => {
        //         // this.dialogVisible = false
        //     })
        // },
        getList(renew = true) {
            if (renew == true) {
                this.pageIndex = 1
            }
            this.tableData = []
            this.loading = true
            // this.param = {
            //     "pageIndex": this.pageIndex,
            //     "pageSize": this.pageSize,
            //     "key": this.key
            // }
            return this.$axios.post('/Franchise/List',{
                "pageIndex": 1,
                "pageSize": 9999,
            }).then((res) => {
                this.loading = false
                this.tableData = res.rows;
            }).catch((err) => {
                this.loading = false
            })
        },
        // 设置加盟商员工属性
        set(){

        }
    }
}
</script>